<!-- 个人空间页面 -->
<template>
	<view>
		<!-- #ifdef MP -->
		<view class="iconfont icon-xiaoxi position-absolute text-white" style="right: 15rpx; top: 15rpx; padding: 15rpx;background:rgba(51, 51, 51, 0.4); border-radius:100%; font-size: 30rpx; line-height: 1;" @click="clickNavigationButton">
			
		</view>
		<!-- #endif -->
		<!-- 头部 -->
		<view class="flex align-center p-3 border-bottom border-light-secondary">
			<image :src="userinfo.userpic" style="width: 180rpx;height: 180rpx;" class="rounded-circle"></image>
			<view class="pl-3 flex flex-column flex-1">
				<view class="flex align-center">
					<view
						class="flex-1 flex flex-column align-center justify-center"
						v-for="(item, index) in counts"
						:key="index"
					>
						<text class="font-lg font-weight-bold">{{ item.num | formatNum }}</text>
						<text class="font text-muted">{{ item.name }}</text>
					</view>
				</view>

				<view class="flex justify-center align-center">
					<!-- 判断是否进入 本人个人空间 -->
					<button
						v-if="user_id == user.id"
						type="default"
						size="mini"
						style="width: 400rpx;"
						@click="openUserInfo"
					>
						编辑资料
					</button>
					<!-- 关注与 未关注 -->
					<button
						v-else
						size="mini"
						:type="userinfo.isFollow ? 'default' : 'primary'"
						style="width: 400rpx;"
						:class="userinfo.isFollow ? 'text-dark' : 'bg-main'"
						@click="doFollow"
					>
						{{ userinfo.isFollow ? '已关注' : '关注' }}
					</button>
				</view>
			</view>
		</view>

		<!-- tab 栏 切换导航 -->
		<view class="flex align-center" style="height: 100rpx;">
			<view
				class="flex-1 flex align-center justify-center"
				v-for="(item, index) in tabBars"
				:key="index"
				:class="index === tabIndex ? 'font-lg font-weight-bold text-main' : 'font-md'"
				@click="changeTab(index)"
			>
				{{ item.name }}</view
			>
		</view>
		<!-- 主页默认展示数据 -->
		<template v-if="tabIndex === 0">
			<view class="animate__animated animate__faster animate__fadeInLeft">
				<view class="p-3 border-bottom">
					<view class="font-md">账号信息</view>
					<view class="font">账号年龄：{{ userinfo.regtime }}</view>
					<view class="font">账号id：{{ user_id }}</view>
				</view>
				<view class="p-3 border-bottom">
					<view class="font-md">个人信息</view>
					<view class="font">星座：{{ userinfo.birthday }}</view>
					<view class="font">职业：{{ userinfo.job }}</view>
					<view class="font">故乡：{{ userinfo.path }}</view>
					<view class="font">情感：{{ userinfo.qg }}</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="animate__animated animate__fast animate__lightSpeedInLeft">
				<commonList
					v-for="(item, index) in list"
					:key="index"
					:item="item"
					:index="index"
					@follow="follow"
					@doSupport="doSupport"
				></commonList>
				<!-- 引入 全局分割线 组件 -->
				<DividerLine></DividerLine>
				<!-- 引入 上拉加载 组件-->
				<loadMore :loadmore="loadmore"></loadMore>
			</view>
		</template>

		<!-- 弹出层 -->
		<uni-popup ref="popup" type="top" background-color="#fff">
			<view
				class="flex align-center justify-center font-md border-bottom py-2"
				hover-class="bg-light"
				@click="doBlack"
			>
				<text class="iconfont icon-sousuo mr-2"></text>
				{{ userinfo.isblack ? '移出黑名单' : '加入黑名单' }}
			</view>
			<view @click="openChat" class="flex align-center justify-center font-md py-2" hover-class="bg-light">
				<text class="iconfont icon-xiaoxi mr-2"></text> 聊天
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// 性别 数据
	const sexArray = ['保密', '男', '女'];
	// 情感 数据
	const emotionArray = ['保密', '已婚', '未婚'];
	// 引入封装的列表数据 模块
	import commonList from '@/components/common/common-list.vue';
	// 引入下拉更多 组件
	import loadMore from '@/components/common/load-more.vue';
	// 引入 时间戳 转化库
	import $T from '@/common/time.js';
	// 引入vuex
	import { mapState } from 'vuex';
	export default {
		components: {
			commonList,
			loadMore,
		},
		data() {
			return {
				user_id: 0, // 用户id
				userinfo: {
					userpic: '', // 用户头像
					username: '昵称', // 用户名称
					sex: 0, // 性别
					age: 20, // 年龄
					isFollow: false, // 是否关注
					regtime: '3', // 账号年龄
					id: 0, // id
					birthday: '1999-11-08', // 生日
					job: 'IT', // 工作
					path: '保密', // 地址
					qg: '未婚', // 婚姻
				},
				counts: [
					{
						name: '帖子',
						num: 0,
					},
					{
						name: '关注',
						num: 0,
					},
					{
						name: '粉丝',
						num: 0,
					},
				],
				// 默认选中 第一个选项卡
				tabIndex: 0,
				// 选项卡数据
				tabBars: [
					{
						name: '主页',
						page: 1,
					},
					{
						name: '帖子',
						list: [],
						// 三种状态 1. 上拉加载更多 2. 加载中... 3. 没有更多了
						loadmore: '上拉加载更多',
						page: 1, // 分页
						// 用于判断，列表数据是否 重复加载
						firstLoad: false,
					},
					{
						name: '动态',
						list: [],
						// 三种状态 1. 上拉加载更多 2. 加载中... 3. 没有更多了
						loadmore: '上拉加载更多',
						page: 1, // 分页
						// 用于判断，列表数据是否 重复加载
						firstLoad: false,
					},
				],
			};
		},
		// 监听原生 标题栏 按钮点击事件
		onNavigationBarButtonTap() {
			// 判断是否 是本人点击
			this.clickNavigationButton();
		},
		filters: {
			// 过滤 关注，帖子，粉丝数量
			formatNum(value) {
				return value > 99 ? '99+' : value;
			},
		},
		// 计算属性
		computed: {
			// 结构赋值
			...mapState({
				// 从vuex中，获取到用户信息
				user: (state) => state.user,
			}),
			// 返回当前 选项卡，下的list 列表数据
			list() {
				return this.tabBars[this.tabIndex].list;
			},
			// 返回当前 选项卡，下的 loadmore下拉更多
			loadmore() {
				return this.tabBars[this.tabIndex].loadmore;
			},
		},
		// 监听页面加载
		onLoad(e) {
			if (!e.user_id) {
				return uni.showToast({
					title: '非法登录，请重新登录',
					icon: 'none',
				});
			}
			this.user_id = e.user_id;
			// 加载用户个人信息
			this.getUserInfo();
			// 获取用户相关接口
			this.getCounts();
			// 监听common-list组件 关注和顶踩
			uni.$on('updateFollSupport', (e) => {
				switch (e.type) {
					case 'follow': // 关注
						this.follow(e.data.user_id);
						break;
					case 'support': // 顶踩 操作
						this.doSupport(e.data);
						break;
				}
			});
			// 监听评论数变化
			uni.$on('updateComments', ({ id, count }) => {
				// 查询所有分类
				this.tabBars.forEach((tab) => {
					if (tab.list) {
						//如果分类存在
						// 查询 分类下的所有列表
						tab.list.forEach((item) => {
							// 查询到 此篇帖子 id
							if (item.id === id) {
								// 动态修改评论数
								item.comment_count = count;
							}
						});
					}
				});
			});
		},
		// 页面卸载 时
		onUnload() {
			// 清除 监听事件
			uni.$off('updateFollSupport', (e) => {});
			uni.$off('updateIndex', (e) => {});
			uni.$off('updateComments', (e) => {});
		},
		// 存放所有事件
		methods: {
			// 判断是否 是本人点击
			clickNavigationButton() {
				// 如果是本人操作，跳转到 设置页面
				if (this.user_id == this.user.id) {
					return uni.navigateTo({
						url: '../user-set/user-set',
					});
				}
				// 弹出 遮罩层
				this.$refs.popup.open();
			},
			// 请求 获取用户相关数据 接口
			getCounts() {
				this.$H.get('/user/getcounts/' + this.user_id).then((res) => {
					this.counts[0].num = res.post_count;
					this.counts[1].num = res.withfollow_count;
					this.counts[2].num = res.withfen_count;
				});
			},
			// 请求 获取用户个人信息 接口
			getUserInfo() {
				this.$H
					.post(
						'/getuserinfo',
						{
							user_id: this.user_id,
						},
						{
							token: true,
							notoast: true,
						},
					)
					.then((res) => {
						this.userinfo = {
							userpic: res.userpic ? res.userpic : '/static/demo/userpic/4.jpg', // 用户头像
							username: res.username ? res.username : '昵称', // 用户名称
					  sex: sexArray[res.userinfo.sex], // 性别
							age: res.userinfo.age ? res.userinfo.age : '保密', // 年龄
							isFollow: res.fens.length > 0, // 是否关注
							isblack: res.blacklist.length > 0, // 是否拉黑
					  regtime: $T.dateFormat(new Date(res.create_time * 1000), '{Y}-{MM}-{DD}'), // 账号年龄
							// 计算当前日期星座
							birthday: $T.getHoroscope(res.userinfo.birthday), // 生日
							job: res.userinfo.job ? res.userinfo.job : '保密', // 工作
							path: res.userinfo.path ? res.userinfo.path : '保密', // 地址
							qg: emotionArray[res.userinfo.qg], // 婚姻
						};
						// 修改个人空间页面标题
						uni.setNavigationBarTitle({
							title: this.userinfo.username,
						});
					});
			},
			// 切换 tab 选项卡
			changeTab(index) {
				// 如果点击的选项 全等于 自己，终止进程
				if (this.tabIndex === index) return;
				// 否则切换 选项卡
				this.tabIndex = index;
				/* 判断 首次加载列表数据成功，变为true, (防止重复加载) false就是未请求过*/
				if (!this.tabBars[index].firstLoad) {
					// 获取 当前分类下的 列表数据
					this.getList();
				}
			},
			// 关注 -------------------------------------------------
			// 使用自定义事件 follow 关注
			follow(user_id) {
				/* 找到 当前作者的 所有列表数据
				1.遍历所有 分类tab */
				this.tabBars.forEach((tab) => {
					if (tab.list) {
						// 如果分类存在
						// 查询 所有分类 tab 下面的list列表数据
						tab.list.forEach((item) => {
							// 当前点击的用户下的 isFollow (改为true，隐藏关注)
							if (item.user_id === user_id) {
								item.isFollow = !item.isFollow;
							}
						});
					}
				});
			},
			// 顶 或 踩 （操作）---------------------------------------
			doSupport(e) {
				// 拿到 当前的分类选项卡 对应的list列表数据
				this.tabBars[this.tabIndex].list.forEach((item) => {
					// 拿到 每一条 帖子的id
					// 如果列表数据id 和 顶踩 操作id一致
					if (item.id === e.id) {
						// console.log('顶踩操作',item);
						// 判断之前是否已经 赞 或踩 (之前未操作)
						if (item.support.type === '') {
							/* 4. 点击当前 赞 或 踩 数量+1
							 子组件通过 support 判断样式添加，这里需要拼接子组件发布的type值，点击哪一个就让 此 +1 */
							item.support[e.type + '_count']++;
						} else if (item.support.type === 'support' && e.type === 'unsupport') {
							// 如果之前 赞了（判断原数据是赞的，并且 现在点击了 踩）
							// 赞 -1
							item.support.support_count--;
							// 踩 +1
							item.support.unsupport_count++;
						} else if (item.support.type === 'unsupport' && e.type === 'support') {
							// 如果之前 踩了（判断原数据是踩的，并且 现在点击了 赞）
							// 赞 +1
							item.support.support_count++;
							// 踩 -1
							item.support.unsupport_count--;
						}
						/* 2. 赋值给，子组件发布的type（赞 或踩）
						   3. 子组件 通过type 判断 添加样式 或 事件 */
						item.support.type = e.type;
					}
				});
				// 消息提示
				let msg = e.type === 'support' ? '点赞成功' : '踩一脚';
				uni.showToast({ title: msg, duration: 500 });
			},
			// 请求 获取文章列表 接口
			getList() {
				//  获取到当前 分类的 下标
				let index = this.tabIndex;
				// 获取指定分类 的 分页数
				let page = this.tabBars[index].page;
				// 判断 是否处于 第一页 列表数据（如果是就是用户在刷新，否则追加数据）
				let isRefresh = page === 1;
				// 获取 指定文章分类下的文章列表 接口请求
				this.$H
					.get('/user/' + this.user_id + '/post/' + page)
					.then((res) => {
						// 循环获取到，指定的列表数据，要循环遍历一下
						let list = res.list.map((v) => {
							// 调用 封装的 工具类utils.js中，转换列表数据方法
							return this.$U.forMatCommonList(v);
						});
						// console.log(resultL);
						/* 根据获取到 指定id分类，赋值列表数据 
					   判断 是否处于 第一页 列表数据
					  （如果是 那用户正在刷新页面，否则追加数据）
					   加载更多[当前页数据，下一页数据]*/
						this.tabBars[index].list = isRefresh ? list : [...this.tabBars[index].list, ...list];
						/* 如果当前 列表数据<10条 ，展示'没有更多了'否则‘下拉加载更多’*/
						this.tabBars[index].loadmore = list.length < 10 ? '没有更多了' : '上拉加载更多';
						// 判断是否 重复加载列表数据
						if (isRefresh) {
							this.tabBars[index].firstLoad = true;
						}
					})
					.catch((err) => {
						// 如果未获取到数据
						if (!isRefresh) {
							// 如果不是刷新的情况下，退回上一页
							this.tabBars[index].page--;
						}
					});
			},
			// 大号 关注 与取消关注
			doFollow() {
				this.checkAuth(() => {
					// 如果已经 关注了，那就 取消关注，否则关注
					let url = this.userinfo.isFollow ? '/unfollow' : '/follow';
					let msg = this.userinfo.isFollow ? '取消关注' : '关注';
					this.$H
						.post(
							url,
							{
								follow_id: this.user_id,
							},
							{
								token: true,
							},
						)
						.then((res) => {
							this.userinfo.isFollow = !this.userinfo.isFollow;
							uni.showToast({
								title: msg,
								icon: 'none',
							});
							uni.$emit('updateIndex');
							this.getList();
						});
				});
			},
			// 进入编辑资料 页面
			openUserInfo() {
				uni.navigateTo({
					url: '../user-userinfo/user-userinfo',
				});
			},
			// 加入黑名单，或移除黑名单
			doBlack() {
				this.checkAuth(() => {
					// 如果已经 加入黑名单，那就 移除黑名单，否则假日
					let url = this.userinfo.isblack ? '/removeblack' : '/addblack';
					let msg = this.userinfo.isblack ? '移出黑名单' : '加入黑名单';

					uni.showModal({
						content: '是否要' + msg,
						success: (res) => {
							if (res.confirm) {
								this.$H
									.post(
										url,
										{
											id: this.user_id,
										},
										{
											token: true,
										},
									)
									.then((res) => {
										this.userinfo.isblack = !this.userinfo.isblack;
										uni.showToast({
											title: msg + '成功',
											icon: 'none',
										});
									});
							}
						},
					});
				});
			},
			// 下拉加载更多
			// 打开聊天页面
			openChat() {
				// console.log('打开聊天页面');
				let user = {
					user_id: this.user_id,
					username: this.userinfo.username,
					userpic: this.userinfo.userpic,
				};
				this.navigateTo({
					// 跳转到 发布页面
					url: '/pages/friend-list/user-chat/user-chat?user=' + JSON.stringify(user),
				});
				// 清空底部导航未读数
			},
		},
	};
</script>

<style lang="scss"></style>
